import { withRouter } from "react-router";
import { Component } from "refast";
import logic from "./logic";
import "./PageDefault.less";
import jc_1 from "./../../images/jc_1.png";
import jc_2 from "./../../images/jc_2.png";
import jc_3 from "./../../images/jc_3.png";
import girls from "./../../images/girls.png";
import manmu_1 from "./../../images/manmu_1.png";
import manmu_2 from "./../../images/manmu_2.png";
import manmu_3 from "./../../images/manmu_3.png";
import ReactEcharts from "echarts-for-react";
import { Dialog, Grid, Image, Table } from "uxcore";
import moment from "moment";
import emitter from "./../ev";
import { IMAGE_URL_PREFIX } from "../../app/variables";
const { Row, Col } = Grid;

class PageDefault extends Component {
  constructor(props) {
    super(props, logic);
    this.okModal = this.okModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.onWindowResize = this.onWindowResize.bind(this);
    this.onQyxypjClick = this.onQyxypjClick.bind(this);
    this.onCioCreditPagerChange = this.onCioCreditPagerChange.bind(this);
    this.okCioCreditModal = this.okCioCreditModal.bind(this);
    this.hideCioCreditModal = this.hideCioCreditModal.bind(this);
    this.onGrxypjClick = this.onGrxypjClick.bind(this);
    this.okPersonCreditModal = this.okPersonCreditModal.bind(this);
    this.hidePersonCreditModal = this.hidePersonCreditModal.bind(this);
    this.onPersonCreditPagerChange = this.onPersonCreditPagerChange.bind(this);
    this.hideDispatchModal = this.hideDispatchModal.bind(this);
    this.personDtailsOk = this.personDtailsOk.bind(this);
    this.okPersonList = this.okPersonList.bind(this);
    this.hidePersonList = this.hidePersonList.bind(this);
    this.hidePersonDetails = this.hidePersonDetails.bind(this);
    this.okPersonDetails = this.okPersonDetails.bind(this);
    this.onDispatchSumChange = this.onDispatchSumChange.bind(this);
    this.onPersonListChange = this.onPersonListChange.bind(this);
    this.imgShow = this.imgShow.bind(this);
    this.hideImgModal = this.hideImgModal.bind(this);
    this.okImgModal = this.okImgModal.bind(this);
    this.onFGMapShow = this.onFGMapShow.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (
      Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length
    ) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  onWindowResize() {
    this.setState({
      wHeight: window.innerHeight,
      aHeight: window.innerHeight - this.state.mHeight * 3 + 130,
    });
  }

  componentWillMount() {
    this.dispatch([
      "oeq",
      "oc",
      "gcec",
      "pcc",
      "pccAll",
      "ocr",
      "pcr",
      "engWorkerStatistical",
      "fgeng",
    ]);
    const { dispatchSumDialogVisible } = this.props;
    if (dispatchSumDialogVisible) {
      this.dispatch(["fetchDispatchSum"], {
        pageSize: 10,
        currentPage: 1,
      });
    }
  }

  componentDidMount() {
    window.addEventListener("resize", this.onWindowResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.onWindowResize);
  }

  // 点击人员数量
  onRyslClick() {
    this.dispatch(["viewMx", "showModal"], "rysl");
  }

  //点击派工人员
  onDispatchClick() {
    this.handleDispatchSumDialogVisible(true);
    this.dispatch(["fetchDispatchSum"], {
      pageSize: 10,
      currentPage: 1,
    });
  }

  onDispatchSumChange(current, pageSize) {
    this.dispatch(["fetchDispatchSum"], {
      pageSize: pageSize,
      currentPage: current,
    });
  }

  //查看派工人员列表
  fetchPersonList() {
    this.dispatch(["fetchPersonList"], {
      pageSize: 10,
      currentPage: 1,
    });
  }

  onPersonListChange(current, pageSize) {
    this.dispatch(["fetchPersonList"], {
      sgxkId: this.state.personList.sgxkId,
      pageSize: pageSize,
      currentPage: current,
    });
  }

  // 点击证书分类数据
  onZsflClick() {
    this.dispatch(["viewMx", "showModal"], "zsfl");
  }

  // 点击企业信用评级
  onQyxypjClick(creditLevel) {
    // this.dispatch(['fetchCioCredit', 'showCioCreditModal'], {creditLevel});
  }

  // 点击个人信用评级
  onGrxypjClick(creditLevel) {
    this.dispatch(["fetchPersonCredit", "showPersonCreditModal"], {
      creditLevel,
    });
  }

  //考试试卷及现场照片点击事件
  imgShow(url) {
    this.dispatch(["imgShow"], { url });
  }

  onCioCreditPagerChange(current, pageSize) {
    this.dispatch(["fetchCioCredit"], {
      creditLevel: this.state.cioCredit.creditLevel,
      pageSize: pageSize,
      currentPage: current - 1,
    });
  }

  onPersonCreditPagerChange(current, pageSize) {
    this.dispatch(["fetchPersonCredit"], {
      creditLevel: this.state.personCredit.creditLevel,
      pageSize: pageSize,
      currentPage: current - 1,
    });
  }

  okModal() {
    this.dispatch("hideModal");
  }

  okImgModal() {
    this.dispatch("hideImgModal");
  }

  hideImgModal() {
    this.dispatch("hideImgModal");
  }

  okCioCreditModal() {
    this.dispatch("hideCioCreditModal");
  }

  //隐藏人员明细
  personDtailsOk() {
    this.dispatch("personDtailsCancel");
  }

  okPersonCreditModal() {
    this.dispatch("hidePersonCreditModal");
  }

  hideModal() {
    this.dispatch("hideModal");
  }

  hideCioCreditModal() {
    this.dispatch("hideCioCreditModal");
  }

  hidePersonCreditModal() {
    this.dispatch("hidePersonCreditModal");
  }

  hideDispatchModal() {
    this.dispatch("hideDispatchModal");
    this.handleDispatchSumDialogVisible(false);
  }

  handleDispatchSumDialogVisible(visible) {
    const { changeDispatchSumDialogVisible } = this.props;
    if (changeDispatchSumDialogVisible) {
      changeDispatchSumDialogVisible(visible);
    }
  }

  // 复工工程地图显示
  onFGMapShow() {
    emitter.emit("FGMapShow", "");
  }

  // 复工工程地图隐藏
  onFGMapHide() {
    //this.dispatch('amap/onFGMapHide');
    emitter.emit("FGMapShow", "");
  }

  dateFormat_1(longTypeDate) {
    var dateType = "";
    var date = new Date();
    date.setTime(longTypeDate);
    dateType += date.getFullYear(); //年
    dateType += "-" + this.getMonth(date); //月
    dateType += "-" + this.getDay(date); //日
    return dateType;
  }
  //返回 01-12 的月份值
  getMonth(date) {
    var month = "";
    month = date.getMonth() + 1; //getMonth()得到的月份是0-11
    if (month < 10) {
      month = "0" + month;
    }
    return month;
  }
  //返回01-30的日期
  getDay(date) {
    var day = "";
    day = date.getDate();
    if (day < 10) {
      day = "0" + day;
    }
    return day;
  }

  //隐藏人员明细
  okPersonDetails() {
    this.dispatch("hidePersonDetails");
  }

  //隐藏人员明细
  hidePersonDetails() {
    this.dispatch("hidePersonDetails");
  }

  hidePersonList() {
    this.dispatch("hidePersonList");
  }

  okPersonList() {
    this.dispatch("hidePersonList");
  }

  render() {
    let me = this;
    return (
      <div className="page-default">
        <Grid fluid={true}>
          <Row className="show-grid">
            <Col xs={12} md={9}>
              <div className="col_1" style={{ height: this.state.mHeight }}>
                <h2 className="title_top">登记企业/人员基础信息</h2>
                <div className="col-md-24" style={{ marginTop: "10px" }}>
                  <div className="col-md-10">
                    <img src={jc_1} className="imgBg" />
                  </div>
                  <div className="col-md-14 row_2">
                    <p>
                      新增<span className="orange">{this.state.oeq.org.n}</span>
                      家
                    </p>
                    <p>
                      总计
                      <span className="page-default-blue">
                        {this.state.oeq.org.a}
                      </span>
                      家
                    </p>
                  </div>
                </div>
                <div
                  className="col-md-24 cursor-pointer"
                  style={{ marginTop: "10px" }}
                  onClick={() => this.onRyslClick()}
                >
                  <div className="col-md-10">
                    <img src={jc_2} className="imgBg" />
                  </div>
                  <div className="col-md-14 row_2">
                    <p>
                      新增<span className="orange">{this.state.oeq.emp.n}</span>
                      人
                    </p>
                    <p>
                      总计
                      <span className="page-default-blue">
                        {this.state.oeq.emp.a}
                      </span>
                      人
                    </p>
                  </div>
                </div>
                <div
                  className="col-md-24 cursor-pointer"
                  style={{ marginTop: "10px" }}
                  onClick={() => this.onDispatchClick()}
                >
                  <div className="col-md-10">
                    <img src={jc_3} className="imgBg" />
                  </div>
                  <div className="col-md-14 row_2">
                    <p style={{ color: "#ec6c00" }}>务工人员派工</p>
                    <p>
                      总计
                      <span className="page-default-blue">
                        {this.state.pgSum}
                      </span>
                      人
                    </p>
                  </div>
                </div>
              </div>
            </Col>
            <Col xs={12} md={9}>
              <div className="col_1" style={{ height: this.state.mHeight }}>
                <h2 className="title_top">企业类型数据比例</h2>
                <ReactEcharts
                  option={this.state.orgTypeOption}
                  style={{ height: 300 }}
                />
              </div>
            </Col>
            <Col xs={12} md={6}>
              <div style={{ height: this.state.mHeight }}>
                <div className="manmu manmu_1">
                  <div>
                    <div className="manmu_left">
                      <h4>{this.state.zbec.k}</h4>
                      <h1>{this.state.zbec.v}</h1>
                    </div>
                    <div className="manmu manmu_right">
                      <img src={manmu_1} />
                    </div>
                  </div>
                </div>

                <div className="manmu manmu_2">
                  <div>
                    <div className="manmu_left">
                      <h4>{this.state.zjec.k}</h4>
                      <h1>{this.state.zjec.v}</h1>
                    </div>
                    <div className="manmu_right">
                      <img src={manmu_2} />
                    </div>
                  </div>
                </div>
                {/*
                <div className="manmu manmu_3" onClick={() => this.onFGMapShow()}>
                  <div>
                    <div className="manmu_left">
                      <h4>{this.state.fgec.k}</h4>
                      <h1>{this.state.fgec.v}</h1>
                    </div>
                    <div className="manmu_right">
                      <img src={manmu_3}/>
                    </div>
                  </div>
                </div>
                */}
                {/*竣工工程*/}
                <div className="manmu manmu_3">
                  <div className="manmu_left">
                    <h4>{this.state.jgec.k}</h4>
                    <h1>{this.state.jgec.v}</h1>
                  </div>
                  <div className="manmu_right">
                    <img src={manmu_3} />
                  </div>
                </div>
              </div>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={12} md={9}>
              <div
                className="col_1"
                style={{ height: this.state.mHeight }}
                onClick={() => this.onZsflClick()}
              >
                <h2 className="title_top">注册类证书分类数据</h2>
                <ReactEcharts option={this.state.ryTypeption} />
              </div>
            </Col>
            <Col xs={12} md={9}>
              <div className="col_1" style={{ height: this.state.mHeight }}>
                <h2 className="title_top">企业资质信用评级数据</h2>
                <ReactEcharts
                  id="qyxypj"
                  option={this.state.ocrOptions}
                  onChartReady={(o) => {
                    o.getZr().on("click", (params) => {
                      let point = [params.offsetX, params.offsetY];
                      if (o.containPixel("grid", point)) {
                        let xIndex = o.convertFromPixel(
                          { seriesIndex: 0 },
                          point
                        )[1];
                        let op = o.getOption();
                        let name = op.yAxis[0].data[xIndex];
                        // me.onQyxypjClick(name);
                      }
                    });
                  }}
                />
              </div>
            </Col>
            <Col xs={12} md={6}>
              <div className="col_1" style={{ height: this.state.mHeight }}>
                <h2 className="title_top">个人信用评级数据</h2>
                <ReactEcharts
                  option={this.state.pcrOptions}
                  onChartReady={(o) => {
                    o.getZr().on("click", (params) => {
                      let point = [params.offsetX, params.offsetY];
                      if (o.containPixel("grid", point)) {
                        let xIndex = o.convertFromPixel(
                          { seriesIndex: 0 },
                          point
                        )[0];
                        let op = o.getOption();
                        let name = op.xAxis[0].data[xIndex];
                        // me.onGrxypjClick(name);
                      }
                    });
                  }}
                />
              </div>
            </Col>
          </Row>
        </Grid>

        <Dialog
          title={this.state.dialogTitle}
          width={this.state.dialogWidth}
          onCancel={this.hideModal}
          onOk={this.okModal}
          visible={this.state.showDialog}
          transitionName="slideDown"
        >
          {this.state.showDialogLx}
        </Dialog>

        <Dialog
          title={`${this.state.cioCredit.creditLevel}企业诚信详情`}
          width={1000}
          height={760}
          onCancel={this.hideCioCreditModal}
          onOk={this.okCioCreditModal}
          visible={this.state.cioCredit.visible}
          transitionName="slideDown"
        >
          <Table
            showPagerTotal
            showPagerSizeChanger
            pageSize={this.state.cioCredit.pageSize}
            pagerSizeOptions={[this.state.cioCredit.pageSize]}
            jsxdata={{
              data: this.state.cioCredit.data,
              currentPage: this.state.cioCredit.currentPage,
              totalCount: this.state.cioCredit.totalCount,
            }}
            jsxcolumns={[
              {
                dataKey: "cioName",
                width: 300,
                title: "企业名称",
                ordered: false,
              },
              {
                dataKey: "zzjgdm",
                width: 200,
                title: "组织机构代码",
                ordered: false,
              },
              { dataKey: "eqt", width: 150, title: "资质类型", ordered: false },
              {
                dataKey: "creditLevel",
                width: 120,
                title: "诚信等级",
                ordered: false,
              },
              {
                dataKey: "creditScore",
                width: 120,
                title: "诚信分值",
                ordered: false,
              },
            ]}
            onPagerChange={this.onCioCreditPagerChange}
          />
        </Dialog>

        <Dialog
          title={`${this.state.personCredit.creditLevel}个人诚信详情`}
          width={1000}
          height={760}
          onCancel={this.hidePersonCreditModal}
          onOk={this.okPersonCreditModal}
          visible={this.state.personCredit.visible}
          transitionName="slideDown"
        >
          <Table
            showPagerTotal
            showPagerSizeChanger
            pageSize={this.state.personCredit.pageSize}
            pagerSizeOptions={[this.state.personCredit.pageSize]}
            jsxdata={{
              data: this.state.personCredit.data,
              currentPage: this.state.personCredit.currentPage,
              totalCount: this.state.personCredit.totalCount,
            }}
            jsxcolumns={[
              { dataKey: "name", width: 150, title: "姓名", ordered: false },
              {
                dataKey: "personCertNum",
                width: 200,
                title: "证件号",
                ordered: false,
              },
              {
                dataKey: "cioName",
                width: 300,
                title: "所在单位",
                ordered: false,
              },
              {
                dataKey: "creditLevel",
                width: 120,
                title: "诚信等级",
                ordered: false,
              },
              {
                dataKey: "creditScore",
                width: 120,
                title: "诚信分值",
                ordered: false,
              },
            ]}
            onPagerChange={this.onPersonCreditPagerChange}
          />
        </Dialog>

        <Dialog
          title="工程及派工信息"
          width={1000}
          onCancel={this.hideDispatchModal}
          onOk={this.hideDispatchModal}
          className="antModal"
          // visible={this.state.dispatchSum.visible}
          visible={this.props.dispatchSumDialogVisible}
          transitionName="slideDown"
        >
          <Table
            showMask={this.state.dispatchSum.loading}
            showPagerTotal
            showPagerSizeChanger
            pageSize={this.state.dispatchSum.pageSize}
            pagerSizeOptions={[this.state.dispatchSum.pageSize]}
            jsxdata={{
              data: this.state.dispatchSum.data,
              currentPage: this.state.dispatchSum.currentPage,
              totalCount: this.state.dispatchSum.totalCount,
            }}
            jsxcolumns={[
              { dataKey: "sgxkName", title: "工程", width: "50%" },
              { dataKey: "workerSum", title: "当前派工人数", width: "30%" },
              {
                title: "操作",
                type: "action",
                width: "20%",
                collapseNum: 5,
                actions: [
                  {
                    title: "查看",
                    callback: (item) => {
                      this.dispatch("fetchPersonList", {
                        sgxkId: item.sgxkId,
                        pageSize: 10,
                        currentPage: 1,
                      });
                    },
                  },
                ],
              },
            ]}
            onPagerChange={this.onDispatchSumChange}
          />
        </Dialog>
        {/*当期派工人员*/}

        <Dialog
          width={1000}
          title="派工人员信息"
          visible={this.state.personList.visible}
          onOk={this.okPersonList}
          onCancel={this.hidePersonList}
          className="antModal"
          wrapclassName="wrapModal"
          mask={false}
        >
          <Table
            showMask={this.state.personList.loading}
            showPagerTotal
            showPagerSizeChanger
            pageSize={this.state.personList.pageSize}
            pagerSizeOptions={[this.state.personList.pageSize]}
            jsxdata={{
              data: this.state.personList.data,
              currentPage: this.state.personList.currentPage,
              totalCount: this.state.personList.totalCount,
            }}
            jsxcolumns={[
              {
                dataKey: "workerName",
                title: "姓名",
                width: "20%",
              },
              { dataKey: "workTypeCode", title: "岗位/工种", width: "40%" },
              {
                dataKey: "createTime",
                title: "派工时间",
                width: "20%",
                render: (item) => {
                  // 定制渲染
                  return item === null ? "" : moment(item).format("YYYY-MM-DD");
                },
              },
              {
                title: "操作",
                type: "action",
                width: "20%",
                collapseNum: 5,
                actions: [
                  {
                    title: "查看",
                    callback: (item) => {
                      this.dispatch("showPersonDetails");
                      this.dispatch("pxjl", { xq: item });
                      this.dispatch("pgjl", {
                        xq: item,
                        /*pageSize: 10,
                        currentPage: 1,*/
                      });
                      this.dispatch("jcjl", {
                        xq: item,
                        pageSize: 2,
                        currentPage: 1,
                      });
                      this.dispatch("gz", {
                        xq: item,
                        pageSize: 2,
                        currentPage: 1,
                      });
                      this.dispatch("rypj", {
                        xq: item,
                        pageSize: 2,
                        currentPage: 1,
                      });
                    },
                  },
                ],
              },
            ]}
            onPagerChange={this.onPersonListChange}
          />
        </Dialog>

        {/*派工人员明细*/}
        <Dialog
          height="100%"
          width="70%"
          title="派工人员明细"
          visible={this.state.personDetails.visible}
          onOk={this.okPersonDetails}
          onCancel={this.hidePersonDetails}
          className="antModal2"
          mask={true}
        >
          <Grid fluid style={{ height: "100%" }}>
            <Row style={{ height: "100%" }}>
              <Col
                xs={8}
                md={6}
                style={{ height: "100%", fontSize: "14px", lineHeight: 2.5 }}
              >
                <div style={{ textAlign: "center", fontSize: "16px" }}>
                  {this.state.personDetails.xq &&
                    this.state.personDetails.xq.url && (
                      <img
                        height="180px"
                        src={`${IMAGE_URL_PREFIX}${this.state.personDetails.xq.url}`}
                      />
                    )}
                </div>
                <div className="thirdPageName">
                  {this.state.personDetails.xq.workerName}
                </div>
                <div>
                  岗位/工种 ：{this.state.personDetails.xq.workTypeCode}
                </div>
                <div>
                  培训名称 ：
                  {this.state.personDetails.pxjl &&
                  this.state.personDetails.pxjl.trainName ? (
                    <span style={{ color: "red", fontWeight: "bold" }}>
                      {this.state.personDetails.pxjl.trainName}
                    </span>
                  ) : (
                    "无"
                  )}
                </div>
                <div>
                  培训时间 ：
                  {this.state.personDetails.pxjl &&
                  this.state.personDetails.pxjl.trainStartTime
                    ? moment(
                        this.state.personDetails.pxjl.trainStartTime
                      ).format("YYYY-MM-DD")
                    : "无"}
                </div>
                <div>
                  培训内容 ：
                  {this.state.personDetails.pxjl &&
                  this.state.personDetails.pxjl.trainExplain
                    ? this.state.personDetails.pxjl.trainExplain
                    : "无"}
                </div>
                <div>
                  培训成绩 ：
                  {this.state.personDetails.pxjl &&
                  this.state.personDetails.pxjl.examScore ? (
                    <span
                      style={{
                        color: "green",
                        fontSize: "18px",
                        fontWeight: "bold",
                      }}
                    >
                      {this.state.personDetails.pxjl.examScore}
                    </span>
                  ) : (
                    "无"
                  )}
                </div>
                <div>
                  考试试卷 ：
                  {this.state.personDetails.kssj.url ? (
                    <img
                      height={80}
                      src={`http://111.47.198.28:5880/${this.state.personDetails.kssj.url}`}
                      onClick={() =>
                        this.imgShow(this.state.personDetails.kssj.url)
                      }
                    />
                  ) : (
                    "无"
                  )}
                </div>
                <div>
                  现场培训 ：
                  {this.state.personDetails.wj.map((m) => {
                    return (
                      <img
                        id="img2"
                        onClick={() => this.imgShow(m.url)}
                        style={{
                          height: "auto",
                          cursor: "pointer",
                          width: "20.6325%",
                          position: "relative",
                          borderRadius: "2px",
                          marginRight: "10px",
                        }}
                        src={`http://111.47.198.28:5880/${m.url}`}
                      />
                    );
                  })}
                </div>
              </Col>
              <Col
                xs={28}
                md={18}
                style={{
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                }}
              >
                {/*派工经历*/}
                <div
                  style={{
                    height: "calc(22% - 30px)",
                    marginBottom: "10px",
                    overFlow: "hidden",
                  }}
                >
                  <div className="leaderProjectTitle2">
                    <div className="bgTitle">
                      <div className="iconTitle">派工经历</div>
                    </div>
                  </div>
                  <div>
                    <Table
                      jsxdata={{
                        data: this.state.dispatchRecord.data,
                      }}
                      jsxcolumns={[
                        { dataKey: "sgxkName", title: "工程", width: "60%" },
                        {
                          dataKey: "createTime",
                          title: "派工时间",
                          width: "40%",
                          render: (createTime) => {
                            // 定制渲染
                            return moment(createTime).format(
                              "YYYY-MM-DD HH:mm:ss"
                            );
                          },
                        },
                      ]}
                    />
                  </div>
                </div>
                {/*工资发放*/}
                <div
                  style={{
                    height: "26%",
                    marginBottom: "10px",
                    overFlow: "hidden",
                  }}
                >
                  <div className="leaderProjectTitle2">
                    <div className="bgTitle">
                      <div className="iconTitle">工资发放</div>
                    </div>
                  </div>
                  <div>
                    <Table
                      size="small"
                      showPagerTotal
                      showPagerSizeChanger
                      pageSize={this.state.moneyIssue.pageSize}
                      pagerSizeOptions={[this.state.moneyIssue.pageSize]}
                      jsxdata={{
                        data: this.state.moneyIssue.data,
                        currentPage: this.state.moneyIssue.currentPage,
                        totalCount: this.state.moneyIssue.totalCount,
                      }}
                      jsxcolumns={[
                        {
                          dataKey: "organName",
                          title: "发放单位",
                          width: "60%",
                        },
                        {
                          dataKey: "wageMonth",
                          title: "日期",
                          width: "20%",
                        },
                        {
                          dataKey: "releaseStatus",
                          title: "发放状态",
                          width: "20%",
                          render: (item) => {
                            return item === "已发放" ? (
                              <div style={{ color: "green" }}>已发放</div>
                            ) : (
                              <div style={{ color: "red" }}>{item}</div>
                            );
                          },
                        },
                      ]}
                      onPagerChange={(current, pageSize) => {
                        this.dispatch("gz", {
                          xq: this.state.personDetails.xq,
                          pageSize: pageSize,
                          currentPage: current,
                        });
                      }}
                    />
                  </div>
                </div>

                {/*进场记录*/}
                <div
                  style={{
                    height: "26%",
                    marginBottom: "10px",
                    overFlow: "hidden",
                  }}
                >
                  <div className="leaderProjectTitle2">
                    <div className="bgTitle">
                      <div className="iconTitle"> 进场记录</div>
                    </div>
                  </div>
                  <div>
                    <Table
                      showMask={this.state.enterRecord.loading}
                      size="small"
                      showPagerTotal
                      showPagerSizeChanger
                      pageSize={this.state.enterRecord.pageSize}
                      pagerSizeOptions={[this.state.enterRecord.pageSize]}
                      jsxdata={{
                        data: this.state.enterRecord.data,
                        currentPage: this.state.enterRecord.currentPage,
                        totalCount: this.state.enterRecord.totalCount,
                      }}
                      jsxcolumns={[
                        {
                          dataKey: "engName",
                          title: "项目名称",
                          width: "60%",
                        },
                        {
                          dataKey: "verifyTime",
                          title: "进出时间",
                          width: "20%",
                          render: (item) => {
                            // 定制渲染
                            return moment(item).format("YYYY-MM-DD HH:mm:ss");
                          },
                        },
                        {
                          dataKey: "inOrOut",
                          title: "进场状态",
                          width: "20%",
                          render: (inOrOut) => {
                            // 定制渲染
                            return inOrOut === "out" ? (
                              <div style={{ color: "gray" }}>退场</div>
                            ) : (
                              <div style={{ color: "green" }}>进场</div>
                            );
                          },
                        },
                      ]}
                      onPagerChange={(current, pageSize) => {
                        this.dispatch("jcjl", {
                          xq: this.state.personDetails.xq,
                          pageSize: pageSize,
                          currentPage: current,
                        });
                      }}
                    />
                  </div>
                </div>

                {/*人员评价表格*/}
                <div style={{ height: "26%", overFlow: "hidden" }}>
                  <div className="leaderProjectTitle2">
                    <div className="bgTitle">
                      <div className="iconTitle"> 人员评价</div>
                    </div>
                  </div>
                  <div>
                    <Table
                      size="small"
                      showPagerTotal
                      showPagerSizeChanger
                      pageSize={this.state.rypjData.pageSize}
                      pagerSizeOptions={[this.state.rypjData.pageSize]}
                      jsxdata={{
                        data: this.state.rypjData.data,
                        currentPage: this.state.rypjData.currentPage,
                        pagerSize: this.state.rypjData.pageSize,
                        totalCount: this.state.rypjData.totalCount,
                      }}
                      jsxcolumns={[
                        {
                          dataKey: "organName",
                          title: "评价机构",
                          width: "40%",
                        },
                        {
                          dataKey: "createTime",
                          title: "评价时间",
                          width: "20%",
                          render: (item) => {
                            // 定制渲染
                            return moment(item).format("YYYY-MM-DD HH:mm:ss");
                          },
                        },
                        {
                          dataKey: "comment",
                          title: "评价",
                          width: "40%",
                          render: (
                            comment // 定制渲染
                          ) => <div style={{ color: "red" }}>{comment}</div>,
                        },
                      ]}
                      onPagerChange={(current, pageSize) => {
                        this.dispatch("rypj", {
                          xq: this.state.personDetails.xq,
                          pageSize: 2,
                          currentPage: 1,
                        });
                      }}
                    />
                  </div>
                </div>
              </Col>
            </Row>
          </Grid>
        </Dialog>
        <Dialog
          title="查看图片"
          width={600}
          height={760}
          onCancel={this.hideImgModal}
          onOk={this.okImgModal}
          visible={this.state.personDetails.imgShow.visible}
          transitionName="slideDown"
        >
          <img
            style={{ width: "100%" }}
            src={`http://111.47.198.28:5880/${this.state.personDetails.imgShow.previewImage}`}
          />
        </Dialog>
      </div>
    );
  }
}

export default withRouter(PageDefault);
